<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>what did xx said</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <div id="app">
        <div class="open" v-show="isOpen">
            <img src="./assets/img/exun.gif" alt="">
        </div>
        <div class="wrapper">
            <div class="title">XX的恶勋语录</div>
            <div class="content-wrapper">
                <div class="content">{{json[a].content}}</div>
                <div class="speaker">——{{json[a].speaker}}({{json[a].role}})</div>
                <div class="img-wrapper">
                    <img :src="changeSrc" alt="xx">
                </div>
            </div>
            <div class="button" @click="changeA">下一位投诉人</div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isOpen:true,
                a:0,
                time:3000,
                changeSrc:'./assets/img/jiuwo.jpg',
                json:[
                    {name:'./assets/img/jiuwo.jpg',speaker:'xx',role:'我的',content:'我之前也讨厌水粉 给我头疼的动图，后续发现水粉人还是挺好的 见到我都会打招呼'},
                    {name:'./assets/img/jiuwo.jpg',speaker:'xx',role:'我的',content:'一边补番一边跟水粉聊再一边看前端视频'},
                    {name:'./assets/img/pop.jpg',speaker:'pop',role:'受害者',content:'水粉好还是她好？'},
                    {name:'./assets/img/jiuwo.jpg',speaker:'pika',role:'受害者',content:'呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐呐'},
                    {name:'./assets/img/weibing.jpg',speaker:'xx',role:'我的',content:'我是一个可爱的小男生（说完偷偷看了坐在左边的阿健）'},
                    {name:'./assets/img/pop.jpg',speaker:'leveo',role:'受害者',content:'你上线竟然不跟我说！'},
                    {name:'./assets/img/pop.jpg',speaker:'leveo',role:'受害者',content:'“无所畏惧 我锻炼了一身胆”“我真的怕了”'},
                    {name:'./assets/img/pop.jpg',speaker:'xx',role:'我的',content:'因为水粉是唯一的美食'},
                    {name:'./assets/img/weibing.jpg',speaker:'vanaiden',role:'受害者',content:'良~我跟你说哦，伟兵他刚刚.....'},
                    {name:'./assets/img/jiahui.jpg',speaker:'leveo',role:'受害者',content:'“草膏！”[害羞]'},
                    {name:'./assets/img/jiahui.jpg',speaker:'vanaiden',role:'受害者',content:'你上线竟然不跟我说！'},
                    {name:'./assets/img/pop.jpg',speaker:'xx',role:'我的',content:'水粉换位置 换到我之前的位置...[嘻嘻]'},
                    {name:'./assets/img/jiahui.jpg',speaker:'xx',role:'我的',content:'我的小埋现在一个人在沙发待着了[4年了，腻了]'},
                    {name:'./assets/img/jiuwo.jpg',speaker:'xx',role:'我的',content:'有个小姐姐在我们这借住一个星期，这个星期我的早餐她上班前都有准备 可以白嫖一顿了'},
                    {name:'./assets/img/weibing.jpg',speaker:'leveo',role:'受害者',content:'呐～梓健我说得对不对嘛～'},
                ]
            },
            mounted() {
                setTimeout(()=>{
                        this.isOpen = false
                    },1300)
            },
            methods: {
                changeA:function(){
                    this.changeSrc = './assets/img/exun.gif'
                    let num = parseInt(15*Math.random())
                    this.a = this.a===num? parseInt(16*Math.random()) : num
                    console.log(this.changeSrc + '  qian')
                    setTimeout(()=>{
                        this.changeSrc = this.json[num].name
                    },1500)
                    console.log(this.changeSrc + '  hou')
                    console.log(this.a)
                }
            },
        })
    </script>
</body>
</html>